<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
    <title><!-- HTML5+CSS3 --></title>
  </head>
  <style>
    :root {
      --font-size: 15px;
      --border: 15px;
      --Y: 60px;
    }
    body {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 60s ease infinite;
      height: 100vh;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    body::-webkit-scrollbar {
      width: 0;
      border-radius: 15px;

    }
    body::-webkit-scrollbar-corner {
      background-color: red;
    }
    body::-webkit-scrollbar-thumb {
      background-color: rgb(255, 255, 255);
    }

    .container {
      width: 650px;
      height: 450px;
      border-radius: var(--border);
      background-color: rgba(240, 217, 217, 0.654);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      padding: 4px;
      border-bottom: 3px solid pink;
      border-right: 3px solid pink;
      box-shadow: 0px 0px 10px rgb(60, 56, 56);
    }
    .buttonbox {
      display: flex;
    }
    .marquee {
      -webkit-box-reflect: below 5%
        linear-gradient(transparent, rgba(255, 255, 255, 0.116));
    }
    @media screen and (max-width: 650px) {
      .container {
        width: 450px;
        height: 450px;
      }
      .marquee {
        width: 350px;
        -webkit-box-reflect: below 5%
          linear-gradient(transparent, rgba(255, 255, 255, 0.116));
      }
    }
    .button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 2px 3px;
    }
    .buttonbox .button {
      background: rgb(247, 0, 0);
    }
    .buttonbox :nth-child(2) {
      background: rgb(255, 205, 4);
    }
    .buttonbox :nth-child(3) {
      background: rgb(3, 255, 53);
    }
    .content {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 400px;
      margin: 10px auto;
      text-align: center;
    }
  </style>
  <body>
    <section class="bg">
      <header></header>
    </section>
    <main>
      <div class="container">
        <div class="buttonbox">
          <span class="button"></span>
          <span class="button"></span>
          <span class="button"></span>
        </div>
        <div class="content">
          <h1 style="color: black; size: 20px; background: transparent">
            「 徐欣妍的个人简介」
          </h1>
          <p>江西科技师范大学美术学院徐欣妍</p>
          <p style="background: transparent">
            国色天香 倾城倾国 沉鱼落雁 闭月羞花
          </p>
          <p>如花似玉 花容月貌 美若天仙 艳如桃李</p>
          <p>蛾眉曼睩 蛾眉螓首 皓齿朱唇 韶颜稚齿</p>
          <p>仙姿佚貌 梳云掠月 贤贤易色 云容月貌</p>
          <marquee class="marquee" width="500px"
            >美丽可爱 善良淳朴 蛾眉曼睩 蛾眉螓首 皓齿朱唇 韶颜稚齿 国色天香
            倾城倾国 沉鱼落雁 闭月羞花</marquee
          >
        </div>
      </div>
    </main>
    <embed src="//music.163.com/style/swf/widget.swf?sid=307949&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=307949&auto=1&height=66"></iframe>
  </body>

  <script>
    $webfont.load("body", "579e83e7964640179743761b750aae45", "YouYuan");
    $webfont.draw();
  </script>

</html>
